@import "../../../../assets/styles/mixins";

.sidebar {
  @apply relative;
  > div {
    @apply text-center absolute w-full;
    @include shadow('lg', false);
    background-image: linear-gradient(to right, #e0e4fb, #c7cced);
    min-height: 500px;
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    top: 50%;
    transform: translateY(-50%);
    border-top: 2px solid rgba(255, 255, 255, 0.7);
    border-left: 2px solid rgba(255, 255, 255, 0.6);

    .logo {
      @apply text-5xl block mb-7;
      color: #0054be;
    }
  }

  .menu {
    .item {
      > a {
        @apply block mb-5 text-xl;

        svg {
          @apply mx-auto transition-colors;
          fill: #1c2034;
        }
      }

      &:hover svg {
        fill: #666d91;
      }

      &.active svg {
        @apply fill-primary;
      }
    }
  }
}
